<template>
  <div>
    <div class="block">
      <span class="demonstration">hover 触发子菜单</span>
      <el-cascader
        mu
        v-model="value"
        :options="options"
        :props="{ expandTrigger: 'hover',multiple : true }"
        @change="handleChange"
      ></el-cascader>
    </div>


    <el-button @click="req">请求</el-button>
    <el-button @click="con">打印</el-button>
  </div>
</template>

<script>
import { findTree } from '@/api/user'

export default {
  name: 'index',
  data() {
    return {
      value: [],
      options: [{
        value: 1,
        label: 'Radio 单选框'
      }, {
        value: 2,
        label: 'Checkbox 多选框'
      }, {
        value: 3,
        label: 'Input 输入框'
      }, {
        value: 4,
        label: 'InputNumber 计数器'
      }, {
        value: 5,
        label: 'Select 选择器'
      }, {
        value: 6,
        label: 'Cascader 级联选择器'
      }, {
        value: 7,
        label: 'Switch 开关'
      }, {
        value: 8,
        label: 'Slider 滑块'
      }, {
        value: 9,
        label: 'TimePicker 时间选择器'
      }]
    }
  },
  methods: {
    req() {
      findTree().then(res => {
        console.log(res)
        let a = []
        res.data.forEach(item => {
          a.push([item])
        })
        this.value = a
      })
    },
    con() {
      console.log(this.value)
    },
    handleChange(value) {
      console.log(this.value)
    }
  }
}
</script>

<style scoped>

</style>
